import "@/ulits/css/common.css";
import "./indexZone.scss";
import { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import ZoneClass from "@views/zone/component/zoneClass/ZoneClassIndex";
import ZoneRank from "@views/zone/component/zoneRank/ZoneRankIndex";
function IndexZone() {
  const [activeIndex, setActiveIndex] = useState(0);
  const containerRef = useRef(null);
  const timerRef = useRef(null);
  const isAutoScrolling = useRef(false);
  const navigate  = useNavigate();
  // 自动滚动逻辑
  useEffect(() => {
    const startAutoScroll = () => {
      timerRef.current = setInterval(() => {
        setActiveIndex(prev => {
          const itemCount = 3; // 根据实际数据量修改
          const nextIndex = (prev + 1) % itemCount;
          if (containerRef.current) {
            isAutoScrolling.current = true;
            const cardWidth = containerRef.current.offsetWidth;
            containerRef.current.scrollTo({
              left: nextIndex * cardWidth,
              behavior: 'smooth'
            });
            // 重置自动滚动标志
            setTimeout(() => {
              isAutoScrolling.current = false;
            }, 500); // 匹配滚动动画时长
          }
          return nextIndex;
        });
      }, 3000);
    };
    startAutoScroll();
    return () => {
      if (timerRef.current) clearInterval(timerRef.current);
    };
  }, []);
  // 处理滚动事件
  const handleScroll = () => {
    if (isAutoScrolling.current) return;
    if (containerRef.current) {
      const cardWidth = containerRef.current.offsetWidth;
      const scrollLeft = containerRef.current.scrollLeft;
      const newIndex = Math.round(scrollLeft / cardWidth);
      setActiveIndex(newIndex);
      // 重置自动滚动定时器
      clearInterval(timerRef.current);
      clearTimeout(timerRef.current);

      timerRef.current = setTimeout(() => {
        const newTimer = setInterval(() => {
          setActiveIndex(prev => {
            const itemCount = 3;
            const nextIndex = (prev + 1) % itemCount;
            if (containerRef.current) {
              isAutoScrolling.current = true;
              const cardWidth = containerRef.current.offsetWidth;
              containerRef.current.scrollTo({
                left: nextIndex * cardWidth,
                behavior: 'smooth'
              });
              
              setTimeout(() => {
                isAutoScrolling.current = false;
              }, 500);
            }
            return nextIndex;
          });
        }, 3000);
        timerRef.current = newTimer;
      }, 5000);
    }
  };
  const pathTo = () => {
    navigate("/zoneData"); 
  };
  return (
    <div className="indexZone">
      {/* 头部 */}
      <div className="group_1 flex-col">
        <div className="group_3 flex-row justify-between">
          <img
            className="label_1"
            src={
              "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng87402e41402f92380df592d997937067517d5bdb0387e6dcf8a1a48060dcf35f"
            }
            alt=""
          />
          <span className="text_2">&nbsp;&nbsp;指数专区</span>
        </div>
      </div>
      {/* 菜单 */}
      <div className="group_4">
        <div className="block_1">
          <div className="list_1 flex-row">
            <div className="image-text_1 flex-col">
              <img
                className="label_2-0"
                src={
                  "https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbc30217d3d8d8b8338edeb31e18c68ae295271bdf8e3d0e566dc62afebe28cad"
                }
                alt=""
              />
              <span className="text-group_1">指数数据库</span>
            </div>
            <div className="image-text_1 flex-col" onClick={pathTo}>
              <img
                className="label_2-1"
                src={
                  "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng923e57f84a6fdf6e81cc25e151aa4a360fb8d02cebadc59a1f19d10626f6e831"
                }
                alt=""
              />
              <span className="text-group_1">指数宝</span>
            </div>
            <div className="image-text_1 flex-col">
              <img
                className="label_2-2"
                src={
                  "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1bebf078755c090d0a5335beef33ebac2f7b9dad26607279303db2e09752d490"
                }
                alt=""
              />
              <span className="text-group_1">指数课堂</span>
            </div>
            <div className="image-text_1 flex-col">
              <img
                className="label_2-3"
                src={
                  "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng63a48ed4538993f57be30dcec2fd58d0f027c375236233f0bc966829c9a93422"
                }
                alt=""
              />
              <span className="text-group_1">专属社群</span>
            </div>
          </div>
        </div>
      </div>
      {/* 追踪热点 */}
      <div className="indexZone_hot">
        <div className="image-text_2 flex-row justify-between">
          <img
            className="label_3"
            src={
              "https://lanhu-oss-2537-2.lanhuapp.com/SketchPngcd79f72fc106ac0f0671fedd9900c0c4b96dd5465699be9a790338810317c4b2"
            }
            alt=""
          />
          <div className="text-group_2">
            <span className="text_3">热点</span>
            <span className="text_4">跟踪&nbsp;实时把握机会</span>
          </div>
        </div>
        <div className="group_5">
          <div className="text-wrapper_1 justify-between">
            <span className="text_5">今日行情</span>
            <span className="text_6">4月23日&nbsp;13:50</span>
          </div>
          <div className="group_6">
            <div className="text-wrapper_2 flex-row align-center">
              <div className="text_row">
                <div className="text_row_desc_1">
                  上证指数<span className="text_9">+0.83%</span>
                </div>
              </div>
              <div className="text_row">
                <div className="text_row_desc_2">
                  沪深300s<span className="text_9">+1.07%</span>
                </div>
              </div>
              <div className="text_row">
                <div className="text_row_desc_3">
                  创业板指<span className="text_9">+1.45%</span>
                </div>
              </div>
            </div>
          </div>
          <div className="group_7 flex-row justify-between">
            <div className="group_8">
              <div>
                <div className="paragraph_1">新能源</div>
                <div className="text_14">+2.44%</div>
              </div>
              <div className="text-wrapper_4">
                连涨3天
              </div>
            </div>
            <div className="group_9">
              <div>
                <div className="paragraph_1"> 电池</div>
                <div className="text_14">+1.34%</div>
              </div>
              <div className="text-wrapper_4">
                连涨3天
              </div>
            </div>
          </div>
          <div className="group_10 flex-row justify-between">
            <div className="group_11">
              <div>
                <div className="paragraph_1">恒生医疗</div>
                <div className="text_14">+1.14%</div>
              </div>
              <div className="text-wrapper_4">
                连涨3天
              </div>
            </div>
            <div className="group_12">
              <div>
                <div className="paragraph_1">恒生科技</div>
                <div className="text_14">+1.04%</div>
              </div>
              <div className="text-wrapper_4">
                连涨3天
              </div>
            </div>
            <div className="group_13">
              <div>
                <div className="paragraph_1">光伏</div>
                <div className="text_14">+0.34%</div>
              </div>
              <div className="text-wrapper_4">
                连涨3天
              </div>
            </div>
          </div>
          <div className="image-text_3 ">
            <span className="text-group_3">更多指数</span>
            <img
              className="thumbnail_3"
              src={
                "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9acfd58401faa679c541d27f46161169c043c8fd92e5e73324133d5db7042f32"
              }
              alt=""
            />
          </div>
        </div>
      </div>
      {/* 移动端热点追踪 banner */}
      <div className="hotspot-banner mobile-optimized">
        <div className="banner-content">
          {/* 标题部分 */}
          <div className="banner-header align-start">
            <h2 className="main-title">热点追踪</h2>
            <p className="sub-title">掌控市场热点&nbsp;把握投资机遇</p>
          </div>
          {/* 滑动容器 */}
          <div className="swiper-container"     
            ref={containerRef}
            onScroll={handleScroll}
          >
            {/* 单个卡片 - 建议使用循环渲染 */}
            {[1, 2, 3].map((item) => (
              <div className="news-card" key={item}>
                {/* 卡片头部 */}
                <div className="card-header">
                  <div className="tag">有利好</div>
                  <a className="detail-link" href=" ">
                    详情
                    <img
                      className="arrow-icon"
                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9acfd58401faa679c541d27f46161169c043c8fd92e5e73324133d5db7042f32"
                      alt="箭头"
                    />
                  </a>
                </div>
                {/* 主要内容 */}
                <div className="card-body">
                  <div className="news-title">全球AI算力龙头最新官宣！</div>
                  <time className="news-date">5月23日</time>
                  <div className="quote-mark">“</div> 
                  <div className="news-content">
                    <div className="date-info">
                      <div className="news-desc">
                        全球制造业PMI指数重回景气扩张区间，资源品或受内外主动补库周期带动
                      </div>
                    </div>
                    <div className="fund-info flex-row align-cente">
                      <div className="fund-header">
                        <div className="fund-label">相关</div>
                        <div className="fund-label">基金</div>
                      </div>
                      <div className="fund-detail">
                        <div className="fund-name">富国中证芯片产业联接A</div>
                        <div className="fund-performance">
                          <span>成立以来：</span>
                          <span className="highlight">+1500.25%</span>
                        </div>
                      </div>
                      <button className="cta-button">立即上车</button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
          {/* 新增指示点 */}
          <div className="pagination-dots">
            {[0, 1, 2].map((index) => (
              <div 
                key={index}
                className={`dot ${activeIndex === index ? 'active' : ''}`}
              />
            ))}
          </div>
        </div>
      </div>
      {/* 排行 */}
      <ZoneRank />
      <div className="group_22 flex-col">
        <div className="text-wrapper_37 flex-row">
          <span className="text_79">低估定投</span>
          <span className="text_80">估值越低越投&nbsp;潜力越大越投</span>
          <span className="text_81">4月23日</span>
        </div>
        <div className="text-wrapper_38 flex-row justify-between">
          <span className="text_82">SHS创新药</span>
          <span className="text_83">931409.CSI</span>
        </div>
        <div className="section_13 flex-row justify-between">
          <div className="group_23 flex-col">
            <div className="group_24 flex-row justify-between">
              <span className="text_84">估值极低</span>
              <div className="box_8 flex-col" />
            </div>
            <span className="text_85">优于近10年99%的时间</span>
            <div className="group_25 flex-col" />
          </div>
          <div className="group_26 flex-col">
            <div className="group_27 flex-row justify-between">
              <span className="text_86">盈利较强</span>
              <div className="box_9 flex-col" />
            </div>
            <span className="text_87">优于74%的指数</span>
            <img
              className="image_5"
              src={
                "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng12a213a93342f450dd1659d1674b95af99e3770e681d0e17424326e4363d9517"
              }
              alt=""
            />
          </div>
        </div>
        <div className="section_14 flex-row">
          <span className="paragraph_8">
            相关
            <br />
            基金
          </span>
          <div className="section_15 flex-col" />
          <span className="paragraph_9">
            富国中证沪港深创新的产业
            <br />
            ETF联接A
          </span>
          <div className="text-wrapper_39 flex-col">
            <span className="text_88">立即上车</span>
          </div>
        </div>
      </div>
      <div className="group_28 flex-col">
        <div className="image-text_13 flex-row justify-between">
          <span className="text-group_14">一起投计划第13期</span>
          <div className="block_5 flex-col" />
        </div>
        <div className="box_10 flex-row justify-between">
          <div className="text-wrapper_40 flex-col">
            <span className="text_89">专业定制</span>
          </div>
          <div className="text-wrapper_41 flex-col">
            <span className="text_90">定投计划</span>
          </div>
          <div className="text-wrapper_42 flex-col">
            <span className="text_91">自动止盈</span>
          </div>
        </div>
        <div className="box_11 flex-row">
          <div className="text-group_15 flex-col">
            <div className="text-wrapper_43">
              <span className="text_92">5.5</span>
              <span className="text_93">%</span>
            </div>
            <span className="text_94">目标收益率</span>
          </div>
          <div className="text-group_16 flex-col">
            <div className="text-wrapper_44">
              <span className="text_95">9</span>
              <span className="text_96">个月</span>
            </div>
            <span className="text_97">建议时长</span>
          </div>
          <div className="section_16 flex-col" />
        </div>
        <div className="box_12 flex-col">
          <span className="text_98">立即上车</span>
          <div className="text-wrapper_45 flex-col">
            <span className="text_99">5月21日&nbsp;15:00结束</span>
          </div>
        </div>
        <div className="box_13 flex-col">
          <div className="text-wrapper_46">
            <span className="paragraph_10">
              止盈
              <br />
            </span>
            <span className="text_100">8</span>
            <span className="text_101">期</span>
          </div>
        </div>
      </div>
      {/* 指数课堂 */}
      <ZoneClass />
    </div>
  );
}
export default IndexZone;
